<template>
	<div class="show_link">
		<a href="https://element-plus.org/zh-CN/component/scrollbar.html" target="_blank">https://element-plus.org/zh-CN/component/scrollbar.html</a>
	</div>
	<h4 class="title_lv2">基础用法</h4>
	<el-scrollbar height="400px">
	    <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
	</el-scrollbar>
	<!-- 页面代码 源码 -->
	<dropWrap key="oreo">
	  <pre><code class="language-js">{{ htmlCode }} </code></pre>
	</dropWrap>
	<!-- 页面代码 源码 -->
	<div class="hr das"></div>
	<h4 class="title_lv2">横向滚动</h4>
	<el-scrollbar>
	    <div class="scrollbar-flex-content">
			<p v-for="item in 50" :key="item" class="scrollbar-demo-item">
	        {{ item }}
			</p>
	    </div>
	</el-scrollbar>
	<!-- 页面代码 源码 -->
	<dropWrap key="oreo">
	  <pre><code class="language-js">{{ htmlCodeTwo }} </code></pre>
	</dropWrap>
</template>

<script lang="ts" setup>
	import { ref, onMounted, nextTick } from "vue";
	import dropWrap from "../dropWrap.vue";
	import Prism from "prismjs";
	
	let htmlCode = ref<string>(`
		<el-scrollbar height="400px">
			<p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
		</el-scrollbar>
	`);
	let htmlCodeTwo = ref<string>(`
		<el-scrollbar>
		    <div class="scrollbar-flex-content">
		      <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
		        {{ item }}
		      </p>
		    </div>
		  </el-scrollbar>
	`);

/*
生命周期
*/
onMounted(() => {
	nextTick(() => {
		Prism.highlightAll();
	});
});
</script>
<style scoped>
	.scrollbar-flex-content {
	  display: flex;
	}
	.scrollbar-flex-content .scrollbar-demo-item {
	  flex-shrink: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100px;
	  height: 50px;
	  margin: 10px;
	  text-align: center;
	  border-radius: 4px;
	  background: var(--el-color-danger-light-9);
	  color: var(--el-color-danger);
	}
	.scrollbar-demo-item {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 50px;
	  margin: 10px;
	  text-align: center;
	  border-radius: 4px;
	  background: var(--el-color-primary-light-9);
	  color: var(--el-color-primary);
	}
</style>